﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>步骤控制</title>
	<!-- Jquery -->
	<script type="text/javascript" src="/jquery/1.12.4/jquery.min.js"></script>
	<!-- xhui -->
	<link rel="stylesheet" href="/xhui/css/xhui.css?v=1.002">
	<script type="text/javascript" src="/xhui/js/xhui.js?v=1.005"></script>

	<style type="text/css">
		.pageBody { width:1400px; margin:100px auto;}
		.bApplyBody { width: 800px; height: 300px; margin: 50px auto; overflow: hidden; background-color: #f3f4f5; display: flex; justify-content: center; align-items: center; font-size:30px; }
	</style>
</head>

<body>
	<div class="pageBody">
		<div id="applyStep" class="xhStep" data-curr="4">
			<ul>
				<li>填写基本信息</li>
				<li>设置推荐单位</li>
				<li>上传申请表</li>
				<li>上传投标附件</li>
				<li>预览并发布</li>
			</ul>
		</div>

		<div class="bApplyBody">
			<p>填写基本信息</p>
		</div>

		<div class="bApplyBody">
			<p>设置推荐单位</p>
		</div>

		<div class="bApplyBody">
			<p>上传申请表</p>
		</div>

		<div class="bApplyBody">
			<p>上传投标附件</p>
		</div>

		<div class="bApplyBody">
			<p>预览并发布</p>
		</div>
	</div>

    <script type="text/javascript">
	$(function () {
		//步骤导航管理
		$('#applyStep').xhStep({
			width: 1200,
			color: '#08aa9d',
			currNum: parseInt($("#applyStep").attr("data-curr")),
			currClick: function (i) {
				showStepBody(i);
			}
		});

		showStepBody(parseInt($("#applyStep").attr("data-curr")));
		function showStepBody(i) {
			$('.bApplyBody').hide();
			$('.bApplyBody').eq(i-1).show();
		}
	});
    </script>

	<div class="doc">
		width：步骤控制器所占用的宽度，默认值（1000）<br />
		color：已完成的步骤背景颜色，默认值（#2d8cf0）<br />
		currNum：已完成的步骤数量，默认值（1）<br />
		currClick：已完成步骤点击事件，参数 = 当前步骤的角标（第一个=0）
	</div>
</body>
</html>